@charset "UTF-8";
/* Css for PEL, ver 1.0 CopyRight By Dongyi Network Technology CO.,Ltd Design Center
   本网站通用布局
*/

/* Css 初始化 */
html { font-size: 8.32px; }
body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; color: #333; }
pre { white-space: pre-wrap; word-wrap: break-word; font-size: inherit; line-height: inherit; font-family: inherit; }
ul, ol, li { padding: 0; list-style: none; margin: 0; }
dl, dt, dd { margin: 0; font-weight: normal; }
p, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; line-height: inherit; font-size: inherit; }
i, em { font-style: normal; }
a { color: #333; text-decoration: none; }
a:hover { color: #1E4CA2; text-decoration: none; }

/* 公共 */
.iconfont{ font-size: inherit; line-height: inherit; }
.iconsvg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
.form-control::-webkit-input-placeholder { color: #d2d2d2; }
.form-control::-moz-placeholder { color: #d2d2d2; }
.pic img{ width: 100%; height: auto; min-height: 100%; }


@font-face {
  font-family: "SourceHanSerifCN SemiBold";
  font-weight: 500;
  src: url("../../base/fonts/SourceHanSerifCN-SemiBold.woff2") format("woff2"),
  url("../../base/fonts/SourceHanSerifCN-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSerifCN Bold";
  font-weight: 700;
  src: url("../../base/fonts/SourceHanSerifCN-Bold.woff2") format("woff2"),
  url("../../base/fonts/SourceHanSerifCN-Bold.woff") format("woff");
  font-display: swap;
}

/* 框架 */
body { font-size: 170%; }
#content { position: relative; z-index: 1; padding: 0 0 1.875rem; min-height: 37.5rem; background: #fff; }
.container::after, .container::before, #content::after, #content::before { display: table; content: " "; clear: both; }
.row,
.container { --bs-gutter-x: 1.875rem; --bs-gutter-y: 1.875rem; }

/* 顶部 */
#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 2; animation: fadeInDown 1s ease 0s 1; background: linear-gradient(180deg, #103374 0%, rgba(16, 51, 116, 0) 100%); }


/* 顶部栏 */
.topbar { min-height: 0; padding: 0.5625rem 0; background: #1E4CA2; color: #fff; }
.topbar .welcome { line-height: 2em; font-size: .875em; }
.list-panel > li { position: relative; z-index: 2; color: #fff; font-size: .875em; height: 2em; padding: 0 0.6rem; }
.list-panel > li::before { position: absolute; left: 0; top: 0.5em; content: ''; background: rgba(255, 255, 255, 0.8); width: 1px; height: 1em; }
.list-panel > li:first-of-type::before { display: none; }
.list-panel > li a { color: inherit; text-decoration: none; }
.list-panel > li a { display: block; height: 2em; line-height: 2em; padding: 0 0.6rem; }
.list-panel > li a:hover { background: rgba(0, 0, 0 , .1); }
.list-panel > li .iconfont { font-size: 1.4rem; }
.list-panel > li .pic { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1.2rem; padding: 0.625rem; background: #fff; filter: drop-shadow(0 0 0.7rem rgba(0, 0, 0, 0.2)); transition: all ease 0.4s; visibility: hidden; opacity: 0; }
.list-panel > li .pic::before { position: absolute; content: ''; width: 0; height: 0; left: 50%; bottom: 100%; margin-left: -0.625rem; border: 0.625rem solid transparent; border-bottom-color: #fff; }
.list-panel > li .pic img { width: 9.375rem; height: 9.375rem; }
.list-panel > li:hover .pic { visibility: visible; opacity: 1; }

/* logo */
#header .logo { flex-grow: 1; }
#header .logo a { display: block; margin: 2rem 0; }
#header .logo img { width: auto; height: 4.375rem; }

/* 主导航 */
.navbar { padding: 0; }
.navbar .container { position: relative; }
.navbar .navbar-collapse { margin: 0 -2%; }

.nav-main { border-top: 2px solid #FECE49; background: linear-gradient(180deg, rgba(30, 76, 162, 0.95) 62.24%, rgba(30, 76, 162, 0) 100%); padding-bottom: 3.75rem; max-height: 62.5rem; overflow-y: auto; }
.nav-main .li1 { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.nav-main .li1:last-of-type { border-bottom: none; }
.nav-main .a1 { display: block; line-height: 3.125rem; padding: 1.25rem 1.875rem; font-size: 1.25em; font-weight: bold; color: #fff; text-decoration: none; }
.nav-main .dropdown1 { display: none; padding: 0 1.875rem 1.25rem; }
.nav-main .dropdown1 .ul1 { display: flex; flex-wrap: wrap; }
.nav-main .dropdown1 .li2 { min-width: 33.3333%; }
.nav-main .dropdown1 .a2 { display: block; padding: 0.625rem 1.25rem; font-size: 1em; color: rgba(255, 255, 255, 0.8); }
.nav-main .hasUl1 .drop { position: absolute; right: 0; top: 0; width: 5.375rem; height: 5.375rem; }
.nav-main .hasUl1 .drop::after,
.nav-main .hasUl1 .drop::before { position: absolute; content: ""; display: block; right: 1.875rem; top: 50%; margin-top: -1px; height: 2px; width: 1.875rem; background: #fff; }
.nav-main .hasUl1 .drop::before { transform: rotate(90deg); }
.nav-main .hasUl1 .show .drop::before { display: none; }

/* 导航折叠按钮 */
#header .navbar-toggler { margin-left: 1rem; border: none; color: #fff; outline: none; width: 5rem; height: 4.375rem; font-size: 3.125rem; line-height: 4.2rem; box-shadow: none; border-radius: 0.375rem; }
#header .navbar-toggler[aria-expanded=true] { background: rgba(30, 76, 162, 0.8); }

/* 搜索弹窗按钮 */
.nav-panel { position: relative; z-index: 1; }
.nav-panel .btn-search { margin-left: 1rem; font-size: 1.5rem; width: 3.125rem; height: 3.125rem; line-height: 3.125rem; color: #fff; font-weight: normal; border: 1px solid #fff; border-radius: 50%; cursor: pointer; text-align: center; transition: all ease 0.3s; }
.nav-panel .btn-search:hover { transform: scale(1.1); }

/* 搜索弹框 */
#modal-search { background: rgba(0, 0, 0, .7); }
#modal-search .modal-backdrop{ display: none !important; }
#modal-search .modal-dialog{ max-width: none; justify-content: center; }
#modal-search .modal-content{ width: 85%; background: none; box-shadow: none; border: none; border-radius: 0; }
#modal-search .btn-close{ position: absolute; z-index: 1; left: 50%; top: 50%; margin: 5rem 0 0 -2rem; padding: 1.25rem; color: #fff; font-size: 1.5rem; color: #fff; pointer-events: auto; text-align: center; line-height: 1; opacity: 1; font-weight: bold; box-shadow: none; background: none; border: none; transition: all ease .4s; }
#modal-search .btn-close:hover{ transform: rotate(180deg); }
.s-form { display: flex; }

/* 搜索站点选择 */
.s-form .select-box { display: none; }

/* 搜索输入框 */
.s-form .input-box { position: relative; width: 1%; flex-grow: 1; background: #fff; border-radius: .3125rem 0 0 .3125rem; }
.s-form .input-box input { position: relative; width: 100%; height: auto; vertical-align: top; padding: 1.1rem 1.5em; line-height: 2; border: 0; outline: none; background: none; font-size: 1em; }
.s-form .input-box .dropdown-word { position: absolute; top: 100%; width: auto; left: 1.875rem; right: 0; background: #fff; max-height: 11.875rem; overflow-y: auto }
.s-form .input-box .dropdown-word li { padding: 0 0.625rem; font-size: 0.9375em; line-height: 2.5; cursor: pointer; }
.s-form .input-box .dropdown-word li:hover { background: #f5f5f5; color: #1E4CA2; }
.s-form .btn-box { background: linear-gradient(180deg, #1E4CA2, #205CC4); border-radius: 0 .3125rem .3125rem 0; }
.s-form .btn-box input{ height: auto; line-height: 2; padding: 1.1rem 1.5em; overflow: hidden; border: none; outline: none; color: #fff; background: none; font-size: 1.1em; text-align: center; font-weight: bold; }
.s-form .btn-box input:focus{ outline: none; box-shadow: none; }
.s-form .link-box{ text-align: right; font-size: 14px; }



/* 友情链接 */
.box-friendly{ margin-bottom: 2.1875rem; }
.box-friendly .btn-group { display: block; border-radius: 0; }
.box-friendly .btn-group .btn { position: relative; width: 100%; height: 2.5em; line-height: 2.5em; border-radius: 0; border: none; text-align-last: left; text-align: left; background: #fff; padding: 0 3.125rem 0 1.25rem; font-size: 1em; color: #333; box-shadow: none; overflow: hidden;  white-space: normal; }
.box-friendly .btn-group .btn::after { position: absolute; margin: 0; font-size: 1.4em; top: 50%; right: 1.25rem; transform: translateY(-50%); border-top-color: #666; }
.box-friendly .btn-group .btn.show::after { transform: translateY(-50%) rotate(90deg); }
.box-friendly .btn-group .dropdown-menu{ width: 100%; --bs-dropdown-font-size: 0.875em; }
.box-friendly .btn-group .dropdown-menu .noData,
.box-friendly .btn-group .dropdown-menu li a{ display: block; padding: 0.5rem 1.25rem; }
.box-friendly .btn-group .dropdown-menu li a:hover{ background: #f6f6f6; text-decoration: none; }

/* 底部 */
#footer { position: relative; z-index: 1; padding: 0 1.875rem; background: #19418d; background-size: cover; color: #fff; }
#footer a { color: inherit; }
#footer img { margin-right: 0 !important; }
.footer-top { padding: 1.5em 0; }
.footer-logobar { display: flex; flex-direction: column; align-items: center; }
.footer-logo { max-width: 80%; }
.footer-logo img { max-width: 100%; margin: 0 !important; }
.list-slogan { text-align: left; justify-content: center; margin-top: .7em; gap: 0.5em 1em; }
.list-slogan li { display: flex; font-size: .875em; line-height: 1.4; font-family: "SourceHanSerifCN SemiBold"; }
.list-slogan li .iconfont { font-size: 0.5em; margin-right: 0.6em; line-height: 2.8; }
.footer-contact { display: inline-block; text-align: left; }
.footer-contact li { padding: 0.1rem 0; font-size: .875em; line-height: 1.4; }
.footer-contact li .iconfont { font-size: 1.3em; margin-right: 0.4em; vertical-align: middle; }
.footer-qrcode { height: 100%; }
.footer-qrcode li { position: relative; margin: 0 0.625rem; text-align: center;}
.footer-qrcode .pic img { width: 8rem; height: auto; }
.footer-qrcode .tit { margin-top: 0.7em; line-height: 1; font-size: 0.875em; }

#footer .copyRight { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0; line-height: 2.2; font-size: 0.875em; color: rgba(255, 255, 255, 0.6); text-align: center; }
#footer .copyRight img { vertical-align: middle; margin-right: 5px !important; }
#footer .pics { display: inline-flex; vertical-align: middle; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
#footer .pics img { height: auto; width: auto; margin: 0 0.375rem; }

/* banner */
.banner { position: relative; height: auto; overflow: hidden; margin-top: calc(1.125rem + 1.75em); }
.banner .swiper-slide { overflow: hidden; }
.banner .pic img { width: 100%; height: auto; min-height: 56.25vw; }
.banner .bg { display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.banner .link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.banner .con { display: none; }
.banner .swiper-pagination { bottom: 1rem; line-height: 1; }
.banner .swiper-pagination-bullets .swiper-pagination-bullet { vertical-align: top; background: rgba(255, 255, 255, 0.5); width: 3.75rem; height: 0.625rem; border-radius: 0; font-size: 0; margin: 0 0.5rem; opacity: 1; }
.banner .swiper-pagination-bullets .swiper-pagination-bullet-active { background: #fff; }
.banner .down { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4.4rem; line-height: 1; cursor: pointer; font-size: 1.875rem; color: #fff; z-index: 10; padding: 0.625rem; animation: down 2s linear 0s infinite; }

/* goTop */
#goTop { position: fixed; display: none; width: 50px; height: 50px; bottom: 60px; right: 5px; z-index: 99; cursor: pointer; margin: 5px; width: 40px; height: 40px; border-radius: 2px; box-shadow: 0 0 5px #9c9c9c; -webkit-box-shadow: 0 0 5px #9c9c9c; opacity: .9; background: rgba(0, 0, 0, .5); }
#goTop::after { display: block; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -15px; content: ""; border-width: 10px; border-color: transparent; border-bottom-color: #fff; border-bottom-style: solid; border-style: dashed; display: block; font-size: 0; line-height: 0; width: 0; }

/* winMark */
#winMark { z-index: 1; width: 100%; display: none; height: 100%; position: fixed; background: rgba(0, 0, 0, .8); left: 0; top: 0; }


/*节点归档信息样式*/
.archived-info { float: right; }
.archived-info span { margin: 0 5px; }

/* 通用底部按钮 */
.bot { text-align: center; padding: 0 0 1.25rem 0; }
.bot a,
.bot button { cursor: pointer; display: inline-block; height: 2.8em; line-height: 2.8em; padding: 0 1.2em; font-size: 1em; background: #1655 ; border: 0; color: #fff; margin: 0 0.625rem; border-radius: 2px; }
.bot a:hover,
.bot button:hover { text-decoration: none; background: #2f60c2; }

/* 依申请、信访、咨询等通用 查询页样色 */
.queryForm { padding: 3% 0; margin: 1.875rem auto; }
.queryForm td { padding: 8px 0}
.queryForm .tdlab { min-width: 7em; text-align: right; font-size: 1em; line-height: 1.4em; padding: 0.6em 0.5em 0.6em 0; }
.queryForm input[type=text] { width: 100%; height: auto; font-size: 1em; line-height: 1.4em; padding: 0.6em 0.7em; border: 1px solid #ddd; border-radius: 3px; outline: none; }
.queryForm .bot { text-align: left; }
.queryForm .bot a { margin: 0; }
.queryForm .required strong { color: #f00; margin-right: 0.5em; }
.queryForm .errorMessage { color: #f00; }
.queryForm table { width: 100%; border: 0; }

/* 依申请、信访、咨询等通用 查询结果页样色 */
.queryResult { margin: 1.875rem auto; }
.queryResult .tit h3 { text-align: center; font-size: 2.125em; line-height: 2; margin-bottom: 1.875rem; }
.queryResult .tips { text-align: center; font-size: 1.125em; margin-bottom: 3.125rem; border-top: 1px solid #ddd; padding: 3.125rem 0 1.25rem 0; }
.queryResult .number { font-weight: bold; color: #f00}

/* 登录注册 */
.userlogincomment { width: auto !important; max-width: 880px; left: 1.25rem !important; right: 1.25rem; margin: auto !important; }
.userlogincomment .user-mainbox .hd h3,
.userlogincomment .user-mainbox .top h3 { color: #1E4CA2; border-bottom-color: #1E4CA2;}
.userlogincomment .user-mainbox .loginBtn { background: #1E4CA2; }
.userlogincomment .user-mainbox .loginBtn:hover { background: #2f60c2;}
.userlogincomment .loginCookie dd .cookie-time { color: #1E4CA2; }
.userlogincomment .login-tip .registerlink a,
.userlogincomment .login-tip .forget-password a { color: #1E4CA2; }
.userlogincomment .user-mainbox .bd { padding: 2.9375rem 2.1875rem 1.25rem; background-position: 999% 999%; }
.userlogincomment .user-panel { width: 100%; padding: 0; }
.userlogincomment .login-tip { float: left; margin: 5% 0 0; width: 100%; height: auto; padding: 0 0 1.875rem; background-size: contain; background-position: right bottom; }
.userlogincomment .user-panel-login input.form-control { height: auto; width: 100%; box-sizing: border-box; }
.userlogincomment .user-panel-login #Password { width: 100%; }
.userlogincomment .user-mainbox .loginBtn { width: 100%; }
.userlogincomment .login-select { width: auto; margin-top: 1.5625rem; }
.userlogincomment .loginCookie { padding-top: 1.25rem; }

/* 评论列表 */
.commentForm { font-size: 1em; line-height: 1.8; }
.commentForm .commentTitle { font-size: 1.5em !important; line-height: 1.5; }
.commentForm .commenttitle,
.commentForm h3.title { margin-bottom: 0 !important; font-size: 1.1em !important; line-height: 2.5; }
.commentForm .comments ul { padding: 0.625rem 0 0.625rem 2.5rem; }
.commentForm .tips,
.commentForm .comments .commenttime,
.commentForm .comments .operate a,
.commentForm .commentstatus { font-size: 0.9em !important; }

/* 无障碍 */
#free_Web_box { font-size: 16px; line-height: 2; }
#free_Web_box_sub ~ .wrap #header { top: 98px; }

/* layui */
.layui-layer { font-size: 16px; }

/* 验证码弹窗 */
#simCaptcha-layer { font-size: 16px; }

@media (min-width:576px) {
    .box-main > .hd > .container { padding: 0 calc(var(--bs-gutter-x) * .5); }
}

@media (min-width:768px) {
    html { font-size: 9.6px; }
    body { font-size: 140%; }

    .list-panel { margin-right: -0.6rem; }

    /* 搜索弹出框 */
    .s-form .btn-box input { padding-left: 2.5em; padding-right: 2.5em; }

    /* banner */
    .banner { margin-top: 0; }

    /* 底部 */
    .footer-logobar { display: block; }
    .footer-logo img { height: 3.75rem; }
    .list-slogan { justify-content: flex-start; }
    .footer-contact { display: block; }

    /* 登录注册 */
    .userlogincomment .user-mainbox .bd { background-position: 51% center; }
    .userlogincomment .user-panel { width: 40%; padding: 0 5% 0 4%; }
    .userlogincomment .login-tip { margin: 5% 0 0 8%; width: 42%; padding: 0 0 13.75rem 0; }

}
@media (min-width:992px) {
    html { font-size: 10.88px; }
    body { font-size: 100%; }
    #content { padding-left: 0; padding-right: 0; }

    /* 顶部 */
    #header .logo a { margin: 1.875rem 0; }
    #header .logo img { height: 4rem; }

    /* 迷你顶部 */
    #header .logo img { transition: width,height ease 0.6s; }
    #header,
    #header .logo a,
    #header .nav-main,
    #header .topbar { transition: all ease 0.6s; transform-origin: center top; }
    #header.mini { box-shadow: 0 .25rem 0.5rem rgba(0, 0, 0, .15); background: #fff; }
    #header.mini .logo a { margin: 0.8rem 0; background: url(../../base/img/logo-custom.png) no-repeat left center; background-size: auto 100%; }
    #header.mini .logo img { visibility: hidden; opacity: 0; height: 3.4rem; }
    #header.mini .topbar { padding: 0.3rem 0; }
    #header.mini .nav-main { margin-bottom: 0; }
    #header.mini .nav-main .a1 { color: #333; }
    #header.mini .nav-panel .btn-search { border-color: #ccc; color: #999; }

    .nav-panel { order: 1; }
    .nav-panel .btn-search { font-size: 1.1rem; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; }


    /* 主导航 */
    .navbar .navbar-collapse { margin: 0; }
    .nav-main { display: flex; border: none; background: none; margin: 0; max-height: none; padding: 0; overflow: visible; }
    .nav-main .li1 { margin: 0; border-bottom: none; }
    .nav-main .h1 { position: relative; }
    .nav-main .a1 { padding: 0 2rem; line-height: 3.875rem; }
    .nav-main .hasUl1 .drop { display: none; }

    /* 导航下拉-效果 */
    .nav-main .hasUl1::after,
    .nav-main .h1::after,
    .nav-main .h1::before { transition: all ease 0.7s; }
    .nav-main .hasUl1::after { position: absolute; display: block; content: ''; left: 50%; margin-left: -1px; bottom: 0; width: 0; height: .625rem; border-left: 2px solid #FECE49; transform-origin: center bottom; transform: scaleY(0); }
    .nav-main .hasUl1:hover::after { transform: scaleY(1); }
    .nav-main .h1::before,
    .nav-main .h1::after { position: absolute; display: block !important; content: ''; top: 100%; width: 50%; height: 0; border-bottom: 2px solid #FECE49; transform: scaleX(0); }
    .nav-main .h1::before { left: 0; transform-origin: right top; }
    .nav-main .h1::after { right: 0; transform-origin: left top; }
    .nav-main .hasUl1:hover .h1::after,
    .nav-main .hasUl1:hover .h1::before { transform: scaleX(1); }

    /* 导航下拉菜单 */
    .nav-main .dropdown1 { position: absolute; padding: 0; left: 0; top: 100%; margin-top: 2px; width: 100%; background: linear-gradient(180deg, rgba(30, 76, 162, 0.95) 62.24%, rgba(30, 76, 162, 0) 100%); }
    .nav-main .dropdown1 .ul1 { position: relative; z-index: 1; display: block; padding-bottom: 3.75rem; }
    .nav-main .dropdown1 .li2 { min-width: auto; border-top: 1px solid rgba(255, 255, 255, .1); }
    .nav-main .dropdown1 .li2:first-of-type { border-top: none; }
    .nav-main .dropdown1 .a2 { display: block; padding: .8rem 0.5rem; line-height: 1.4; font-size: 1em; color: #fff; text-align: center; }
    .nav-main .dropdown1 .a2:hover { font-weight: bold; background: rgba(0, 0, 0, .2); text-decoration: none; }

    /* 搜索弹窗 */
    #modal-search .modal-content { width: 56.25rem; }

    /* 底部 */
    .list-slogan li { width: 40%; flex-grow: 1; }
    .footer-qrcode .pic img { width: 5.5rem; }

    /* 当前位置 */
	.path{ width: auto; background: none; padding: 0; order: 1; margin: 0 0 0 2rem; }

    /* box-main */
    .box-main > .hd > .container { min-height: 4.375rem; }
    .box-main > .hd #main-menu { width: 1%; flex-grow: 1; }

    /* 依申请、信访、咨询等通用 查询结果页样色 */
    .queryResult { width: 80%; }

    /* 依申请、信访、咨询等通用 查询页样色 */
    .queryForm { width: 80%; }
    .queryForm .tdlab { width: 40%; }
    .queryForm input[type=text] { width: 56%; }
}
@media (min-width:1200px) {
    html { font-size: 13.44px; }

    /* banner */
    .banner{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh; }
    .banner .swiper-pagination { bottom: 1.9rem; }
    .banner-mask{ height: 100vh; transition: all 0.8s cubic-bezier(.5,0,.2,1) 0s; }
    .banner-mask.open { height: 0; }
}
@media (min-width:1300px) {
    html { font-size: 14.72px }
    .container { max-width: calc(1200px + var(--bs-gutter-x)); }


}
@media (min-width:1400px) {
    html { font-size: 16px; }
    .container { max-width: calc(1300px + var(--bs-gutter-x)); }
}
@media (min-width:1500px) {
    .container { max-width: calc(1400px + var(--bs-gutter-x)); }

    /* 顶部 */
    #header .logo img { height: 5rem; }

    /* 底部 */
    .footer-qrcode .pic img { width: 6.5rem; }
}



/* 动画库 */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
   }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pagination {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@keyframes down{
    0%{
        transform: translate(-50%,0);
        opacity: 0;
    }
    20%{
        transform: translate(-50%,3px);
        opacity: 1;
    }
    80%{
        transform: translate(-50%,10px);
        opacity: 1;
    }
    90%{
        transform: translate(-50%,10px);
        opacity: 0;
    }
    100%{
          transform: translate(-50%,10px);
        opacity: 0;
    }
}
@keyframes toLeft {
    0%{
        transform: translateX(0);
    }
    20%,
    53%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translateX(-15px);
    }
    43% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translateX(-21px);
    }
    70% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translateX(-19px);
    }
    90% {
        transform: translateX(-17px);
    }
}